import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import {
  Modal,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Collapse,
  DatePicker,
  Upload,
  PageHeader,
  Divider,
  message,
  Table,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { formatFile } from '@/pages/Common/common';
import AdButton from '@/components/AdButton';
import { codes, locationType, status } from './utils';
import { formatCodeVal } from '@/pages/Common/common';
// import AntdSelectRegion from '@/components/AntdSelectRegion';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const Panel = Collapse.Panel;

@connect(({ Location, loading, common }) => ({
  Location,
  // loading: loading.effects['Location/locationDataList'],
  dictObject: common.dictObject,
}))
@Form.create()
export default class ETCDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkId: '',
      activeKey: ['1', '2'],
    };
  }
  componentDidMount() {
    const { dispatch, dictObject, checkId } = this.props;
    this.setState({
      checkId: checkId,
    });
  }

  callback = key => {
    // console.log(key);
    this.setState({
      activeKey: key,
    });
  };

  onRef = ref => {
    this.child = ref;
  };

  render() {
    const { activeKey } = this.state;
    const {
      checkId,
      form: { getFieldDecorator },
      Location: { locationDetails },
      isMobile,
      loading,
      visible,
    } = this.props;
    const details = locationDetails[checkId];

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const type = details ? formatCodeVal(locationType, details.type) : '';
    // const parentRegion =
    //   details && details.fullParentIds ? (
    //     <AntdSelectRegion
    //       url="mds/mds-location-area/selectAreaList"
    //       paramsLabel="id"
    //       label="address"
    //       filter={true}
    //       isParent={true}
    //       split=","
    //       value={details.fullParentIds}
    //       onlyReadly={true}
    //     />
    //   ) : (
    //     ''
    //   );

    const fields = [
      { key: 'parentId', name: '上级区域' },
      { key: 'adCode ', name: '行政代码' },
      { key: 'address', name: '区域名称' },
      { key: 'sort', name: '排序号' },
      { key: type, name: '类型', isConst: true },
      { key: 'center', name: '城市中心点' },
      { key: 'updateTime', name: '更新时间' },
      { key: 'remarks', name: '备注', isRow: true },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          <Panel header="配送区域信息" key="1" className={styles.customPanelStyle}>
            <DetailsList isMobile={isMobile} detilsData={{ fields: fields, value: details }} />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
